<template>
  <div :class="mode == 'pop' ? 'captcha-mask' : ''" v-show="showBox">
    <div :class="mode == 'pop' ? 'verifybox' : ''" :style="{ 'max-width': parseInt(imgSize.width) + 30 + 'px' }">
      <div class="verifybox-top" v-if="mode == 'pop'">
        请完成安全验证
        <span class="verifybox-close" @click="closeBoxEmpty">
          <i class="captcha-icon-close"></i>
        </span>
      </div>
      <div class="verifybox-bottom" :style="{ padding: mode == 'pop' ? '15px' : '0' }">
        <!-- 验证码容器 -->
        <component v-if="options.componentType && clickShow" :is="options.componentType"
          :captchaType="options.captchaType" :type="options.verifyType" :mode="options.mode" :vSpace="options.vSpace"
          :explain="options.explain" :imgSize="options.imgSize" :blockSize="options.blockSize"
          :barSize="options.barSize" :captchaGetUrl="options.captchaGetUrl" :captchaCheckUrl="options.captchaCheckUrl"
          :params="options.params" ref="instance"></component>
      </div>
    </div>
  </div>
</template>
<script>
/**
 * Verify 验证码组件
 * @description 分发验证码使用
 * */
import VerifySlide from "./Verify/slide.vue";
import VerifyPoints from "./Verify/points.vue";
import './style.css'

export default {
  name: "IfVerify",
  components: {
    VerifySlide,
    VerifyPoints,
  },
  props: {
    // 验证码类型 可选值 blockPuzzle / clickWord
    captchaType: {
      type: String,
      default: 'blockPuzzle',
    },

    mode: {
      type: String,
      default: "pop",
    },
    vSpace: {
      type: Number,
    },
    explain: {
      type: String,
    },
    imgSize: {
      type: Object,
      default() {
        return {
          width: "310px",
          height: "155px",
        };
      },
    },
    blockSize: {
      type: Object,
    },
    barSize: {
      type: Object,
    },
    isShow: {
      type: Boolean,
      default: false
    },
    captchaGetUrl: {
      type: [String, Function],
      default: '/captcha/get'
    },
    captchaCheckUrl: {
      type: [String, Function],
      default: '/captcha/check'
    }
  },
  data() {
    return {
      clickShow: false,
      verifyType: null,
      componentType: null,
      instance: {},
      options: {},
      handler: null
    };
  },
  computed: {
    showBox: function () {
      return this.mode == "pop" ? this.clickShow : true;
    },
  },
  mounted() {
    const { captchaType, mode, vSpace, explain, imgSize, blockSize, barSize, isShow, captchaGetUrl, captchaCheckUrl, params = {} } = this;
    Object.assign(this.options, { captchaType, mode, vSpace, explain, imgSize, blockSize, barSize, isShow, captchaGetUrl, captchaCheckUrl, params });
  },

  methods: {
    refresh() {
      const { instance } = this;
      instance.refresh && instance.refresh();
    },
    closeBoxEmpty() {
      this.closeBox(null);
    },
    closeBox(payload) {
      this.clickShow = false;
      this.$emit("close", payload);
      this.publish(payload);
    },
    show() {
      this.mode == "pop" && (this.clickShow = true);
    },
    publish(data) {
      this.handler && this.handler(data);
      this.handler = null;
    },
    modifyType() {
      switch (this.options.captchaType) {
        case "blockPuzzle":
          this.options.verifyType = "2";
          this.options.componentType = "VerifySlide";
          break;
        case "clickWord":
        default:
          this.options.verifyType = "";
          this.options.componentType = "VerifyPoints";
          break;
      }
    },
    captcha(options) {
      Object.assign(this.options, options)
      this.modifyType();
      this.show();
      return new Promise(resolve => {
        this.handler = resolve;
      })
    }
  },
  expose: ['captcha', 'closeBox'],
  watch: {
    captchaType: {
      handler() {
        this.modifyType();
      },
      immediate: true,
    },
    isShow: function (val) {
      val ? this.show() : null
    }
  },
};
</script>
